import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'
import Icon, { UserOutlined, VideoCameraOutlined } from '@ant-design/icons'
import { Avatar, Button, Layout, Menu, theme, Popover } from 'antd'
import icon from '@/assets/images/icon.png'
import userSvg from '@/assets/images/ic-user.svg'
import userPng25 from '@/assets/avatar/avatar-25.png'
import orderSvg from '@/assets/images/ic-order.svg'
import { goto } from '@renderer/api'
import './Layout.less'
const { Header, Sider, Content } = Layout
const App = () => {
    const [collapsed, setCollapsed] = useState(false)
    const {
        token: { colorBgContainer, borderRadiusLG }
    } = theme.useToken()

    return (
        <Layout style={{ height: '100vh' }}>
            <Sider
                trigger={null}
                theme="light"
                width="300"
                style={{
                    borderRight: '2px solid #F4F6F8'
                }}
            >
                <div className="demo-logo-vertical">
                    <img src={icon} alt="" /> 管理系统
                </div>
                <Menu
                    style={{
                        borderRight: 0
                    }}
                    className="menu"
                    theme="light"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={[
                        {
                            key: 'user',
                            icon: <img src={userSvg} alt="" />,
                            label: '会员'
                        },
                        {
                            key: 'good',
                            icon: <img src={orderSvg} alt="" />,
                            label: '商品'
                        }
                    ]}
                    onClick={(e) => {
                        if (e.key === 'user') {
                            goto(`/user`)
                        }
                    }}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}
                >
                    <div></div>
                    <div className="avatar">
                        <Popover
                            placement="bottomRight"
                            content={
                                <div
                                    className="logout"
                                    onClick={() => {
                                        localStorage.removeItem('token')
                                        goto('/login')
                                    }}
                                >
                                    退出登录
                                </div>
                            }
                            arrow={false}
                        >
                            <Avatar className="aimg" src={userPng25} size={36} />
                        </Popover>
                    </div>
                </Header>
                <Content
                    style={{
                        padding: 48,
                        minHeight: 280,
                        background: colorBgContainer,
                        overflow: 'auto'
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    )
}
export default App
